<template>
    <!--添加工作经历-->
    <div>
        <headers></headers>
        <div class="title">
            <div class="auto">首页 > 认证考试 > 个人账户信息 > 持有证书</div>
        </div>
        <div class="padding250">
            <div class="auto">
                <div class="content">
                    <p class="titleName">持有证书</p>

                    <div class="formWrapper">
                        <Form :label-width="86" label-position="left" class="formMin">
                            <FormItem label="证书">
                                <Select v-model="form.certificateId" placeholder="请选择证书" size="large" style="width: 245px">
                                    <Option v-for="item in certificateType" :value="item.id">{{item.certificateName}}</Option>
                                </Select>
                            </FormItem>
                            <FormItem label="证书编号">
                                <Input v-model="form.certificateNum" size="large" placeholder="请输入证书编号" style="width: 245px;"/>
                            </FormItem>
                            <FormItem label="发证机构">
                                <Input v-model="form.award" size="large" placeholder="请输入发证机构" style="width: 245px;"/>
                            </FormItem>
                            <FormItem label="发证时间">
                                <DatePicker class="dateRight" v-model="form.awardTimeDate" type="date" placeholder="请选择发证时间" style="width: 245px" size="large"></DatePicker>
                            </FormItem>
                            <FormItem label="证书有效期">
                                <DatePicker class="dateRight" v-model="form.validityDate" type="date" placeholder="请选择证书有效期" style="width: 245px" size="large"></DatePicker>
                            </FormItem>
                            <FormItem label="">
                                <Checkbox v-model="agree">我已阅读并同意</Checkbox>
                                <router-link :to="{name:'xieyicommon',query:{typeCode:'zsdngjsm', backUrl: 'addzhengshu'}}" class="desc">《证书登记说明》</router-link>
                            </FormItem>
                        </Form>
                        <Button type="primary" class="save" v-on:click="addUserCertificate()">登记并返回</Button>
                    </div>
                </div>
            </div>
        </div>
        <footers></footers>
    </div>

</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    .padding250 .auto {
        background-color: #fff;
        margin-top: 30px;
        text-align: left;

        .content {
            padding: 40px;

            .titleName {
                font-size: 20px;
                color: #000;
                margin-bottom: 40px;
            }

        }
    }

    .title {
        font-size: 14px;
        color: #fff;
        height: 60px;
        line-height: 60px;
        background-color: #2F261E;
        text-align: left;
    }

    .desc {
        color: #8C663E;
        font-size: 14px;
    }


    .save {
        background-color: #B2936B;
        color: #fff;
        height: 50px;
        width: 200px;
        font-size: 16px;
        margin-left: 80px;
    }

    .formWrapper {

        .tipwords {
            font-size: 14px;
            color: #666;
        }
    }


</style>
<script type="text/ecmascript-6">
    import {getUserCertificate, addUserCertificate} from "../../../http"
    import headers from '../../template/header'
    import footers from '../../template/footer'

    export default {
        name: '',
        props: {},
        data() {
            return {
                certificateType: [],
                agree: true,
                form: {
                    certificateId: '',
                    certificateNum: '',
                    award: '',
                    awardTimeDate: '',
                    validityDate: ''
                }
            };
        },
        methods: {
            getUserCertificate() {
                getUserCertificate().then(res => {
                    console.info(res.data)
                    this.certificateType = res.data.certificateType
                })
            },
            addUserCertificate() {
                if (!this.agree) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请勾选同意《证书登记说明》",
                        duration: 3,
                    });
                    return
                }
                if (this.form.certificateId == 0) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请选择证书类型",
                        duration: 3,
                    });
                    return
                }
                if (!this.form.certificateNum) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请填写证书编号",
                        duration: 3,
                    });
                    return
                }
                if (!this.form.award) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请输入发证机构",
                        duration: 3,
                    });
                    return
                }
                if (!this.form.awardTimeDate) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请选择发证时间",
                        duration: 3,
                    });
                    return
                }
                if (!this.form.validityDate) {
                    this.$Notice.warning({
                        title: "新增证书提醒",
                        desc: "请选择证书有效期",
                        duration: 3,
                    });
                    return
                }
                this.form.awardTime = JSON.stringify(this.form.awardTimeDate).substring(1, 11)
                this.form.validity = JSON.stringify(this.form.validityDate).substring(1, 11)
                console.info(this.form)
                addUserCertificate(this.form).then(res => {
                    if (res.code == 200) {
                        this.$Notice.success({
                            title: '新增证书提醒',
                            desc: '添加证书成功',
                            duration: 3,
                        });
                        this.$router.push({
                            name: 'haszhengshu'
                        })
                    }
                })
            }
        },
        created() {
            this.getUserCertificate()
        },
        components: {
            headers,
            footers
        }
    }
</script>
